<template>
  <!-- 高定制化单选下拉框 -->
  <view class="mypicker">
    <view class="text_box">
      <u--input
        v-model="text"
        disabled
        disabledColor="#ffffff"
        :placeholder="placeholder"
        border="none"
        @click="showFn"
        :inputAlign="inputAlign"
        :fontSize="fontSize"
      ></u--input>
      <!-- 右侧下拉箭头图标 -->
      <u-icon
        v-if="showIcon"
        :size="iconSize"
        slot="right"
        name="arrow-right"
        @click="showFn"
      ></u-icon>
    </view>
    <!-- 弹出选择器 -->
    <u-picker
      :show="show"
      :title="title"
      :columns="columns"
      :keyName="keyName"
      @cancel="closeModel"
      :closeOnClickOverlay="true"
      @confirm="confirmFn"
      @close="closeModel"
      :immediateChange="true"
      confirmColor="#a22d27"
    ></u-picker>
  </view>
</template>

<script>
/**
 * myPicker 自定义单选下拉选择器组件
 *
 * 功能特点：
 * 1. 支持v-model双向绑定选中项ID
 * 2. 自定义显示字段(keyName)和值字段(idName)
 * 3. 支持配置placeholder/title等文案
 * 4. 提供confirm/close事件回调
 *
 * 依赖uView组件：
 * - u--input (输入框)
 * - u-picker (选择器)
 * - u-icon (图标)
 */
export default {
  props: {
    /**
     * 当前选中值（绑定ID）
     * 示例：v-model="selectedId"
     */
    value: {
      type: String,
      default: "",
    },
    /**
     * 选项数据源（必填）
     * 示例格式：[{id: '1', name: '选项1'}, {id: '2', name: '选项2'}]
     */
    list: {
      type: Array,
      required: true,
    },
    /**
     * 控制选择器是否显示
     * 示例：:show.sync="showPicker"
     */
    show: {
      type: Boolean,
      default: false,
    },
    /**
     * 选择器标题
     * 默认："请选择"
     */
    title: {
      type: String,
      default: "请选择",
    },
    /**
     * 显示字段名（对应数据源中的字段）
     * 默认："name"
     */
    keyName: {
      type: String,
      default: "name",
    },
    /**
     * 值字段名（对应数据源中的字段）
     * 默认："id"
     */
    idName: {
      type: String,
      default: "id",
    },
    /**
     * 输入框占位符文案
     * 默认："请选择"
     */
    placeholder: {
      type: String,
      default: "请选择",
    },
    /**
     * 输入框文字对齐方式
     * 可选值：left/center/right
     * 默认："left"
     */
    inputAlign: {
      type: String,
      default: "left",
    },
    /**
     * 输入框字体大小
     * 默认："15px"
     */
    fontSize: {
      type: String,
      default: "15px",
    },
    /**
     * 下拉图标大小
     * 默认："15px"
     */
    iconSize: {
      type: String,
      default: "15px",
    },
    /**
     * 是否显示下拉箭头图标
     * 默认：true
     */
    showIcon: {
      type: Boolean,
      default: true,
    },
  },
  model: {
    prop: "value", // 此处的value为父组件v-model绑定数据
    event: "input", // 派发事件，事件名只能是input，否则无法生效
  },
  watch: {
    value(newVal) {
      // console.log(newVal, "newVal");
      
      // 当外部值变化时更新显示文本
      let value = newVal;
      if (newVal === "true") {
        value = true;
      }else if (newVal === "false") {
        value = false;
      }
      const selectedItem = this.list.find((item) => {
        console.log(item[this.idName],value);
        
        return item[this.idName] === value;
      });
      this.text = selectedItem ? selectedItem[this.keyName] : "";
    },
  },

  data() {
    return {
      text: "", // 输入框显示文本
    };
  },
  computed: {
    // 转换列表为picker所需格式
    columns() {
      // console.log(this.list, "list");

      return [this.list];
    },
  },
  methods: {
    /**
     * 显示选择器
     */
    showFn() {
      console.log(132);
      this.show = true;
    },
    /**
     * 确认
     * @param {Object} val 选择结果
     */
    confirmFn(val) {
      this.text = val.value[0][this.keyName]; // 更新显示文本
      this.$emit("input", val.value[0][this.idName]); // 触发v-model更新
      this.$emit("confirm", val.value[0]); // 触发confirm事件
      this.closeModel();
    },
    /**
     * 关闭弹窗
     */
    closeModel() {
      this.$emit("update:show", false); // 同步更新show状态
      this.$emit("close"); // 触发close事件
    },
  },
};
</script>

<style lang="scss" scoped>
.text_box {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
</style>
